<template>
  <div class="grid-content rt">
    <span>浏览记录</span>
  </div>
  <div class="grid-content rb" >
    <span>
      <el-input
        v-model="input1"
        size="large"
        placeholder="请输入"
        :prefix-icon="Search"
      />
    </span>
    <el-button v-if="showDel" @click="handShow" type="danger">批量删除</el-button>
    <span v-else>
      <el-button  @click="showDel=true">取消</el-button>
      <el-button >确定</el-button>
      <el-button >全选</el-button>
    </span>
  </div>
</template>

<script setup lang='ts'>
  import {ref} from 'vue'
  import {Search} from '@element-plus/icons-vue'
  const input1 = ref('')
  const showDel=ref(true)
  const handShow=()=>{
    showDel.value=false
  }
</script>

<style scoped lang="less">
  .grid-content {
  border-radius: 10px;
  background-color:white ;
  margin: 20px 5px;
  padding-left:1px;
}
.rb{
  min-height:500px;
  padding: 20px;
  display:flex;
  justify-content: space-between;
}
.rt{
  min-height: 30px;
  padding: 20px;
}
.el-input{
  width: 300px;
}
</style>